<template>
  <div class="patrolTrend-root">
    <formTitleVue
      title="巡查数量走势"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-patrolTrend"></div> -->
    <myLine domId="patrol-patrolTrend-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myLine from '@/components/Echarts/myLine.vue';
import { time_select_optios } from '@/utils/global.js';
import { patrolTrendStatistics } from '@/api/risk/patrol'

export default {
  name: "patrolTrend",
  components: {
    formTitleVue,myLine,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "近一月",
          options:[
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ]
        }
      ],
      // x轴显示格式
      dateMap:{
        "近一月":"03",
        "近半年":"02",
        "近一年":"02",
      },
      chartsData: {
        xData: ["10", "11", "12", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
        yData: [],
      },
      echartsOption:{
        legend:{
          show:false,
        }
      },
      searChForm: {
        startTime: '',
        endTime: '',
      },
    };
  },
  methods: {
    selectChange(item) {
      // console.log(item);
      this.searChForm.startTime = time_select_optios[item].startTime
      this.searChForm.endTime = time_select_optios[item].endTime
      this.searChForm.dateType = this.dateMap[item]
      this.getData()
    },
    getData() {
      // console.log(this.searChForm)
      let params = {
        ...this.searChForm,
        areaCode: this.$store.state.account.user.deptIds
      }
      patrolTrendStatistics(params).then(res=>{
         if(res.code==200){
           this.chartsData.xData = res.data.xAxle
           this.chartsData.yData = res.data.data
        }
      })
      // this.chartsData.yData = [{
      //   name: '总数',
      //   data: [36, 41, 34, 27, 26, 22, 17, 16, 15, 9, 5, 6]
      // },
      // ];
    },
  },
  mounted() {
    this.selectChange(this.selectOptions[0].selectValue)
  },
};
</script>

<style lang="scss" scoped>
.patrolTrend-root {
  #echarts-patrolTrend {
    height: 30vh;
  }
}
</style>
